<template>
	<view>
		<view class="all">
			<view class="top">
				<view class="top_left">
					<image class="yifu" :src="product_info.image.file_path" mode="aspectFit"></image>
				</view>
				<view class="top_right">
					<view class="yifu_class">
						{{product_info.product_name}}
					</view>
					<view class="top_class">
						<span>下单时间：</span><span>{{order_info.create_time}}</span>
					</view>
					<view class="top_class">
						<span>寄出地址：</span><span>{{order_info.address.detail}}</span>
					</view>
					<view class="top_class">
						<span>寄回地址：</span><span>{{order_info.address.j_detail}}</span>
					</view>
				</view>
			</view>
			<view class="xian">
			</view>
			<view class="center">
				<view class="center_top">
					<image class="cor"
						src="https://jiechendy.sdshengyue.cn/uploads/e1/133ec03e35012edc762b32ba3230d8.png"></image>
					<view class="text">
						洗前照片
					</view>
				</view>
				<view class="photo_class">
					<view v-if="imgStatus == false" class="photo" v-for="item in order_info.cleaning_img">
						<image class="zhaop" :src="item"></image>
					</view>
					<view v-else class="photo">
						<image class="zhaop" :src="order_info.cleaning_img"></image>
					</view>
				</view>
			</view>
			<view class="xian">

			</view>
			<view class="bottom">
				<view class="bottom_top">
					<image class="cor"
						src="https://jiechendy.sdshengyue.cn/uploads/55/6ec9068dc4b23da696c899ad142510.png"></image>
					<view class="text">
						清洗状态
					</view>
				</view>
				<!-- <view v-if="order_info.cleaning_status == 0" class="bottom_text">
					订单准备清洗
				</view>
				<view v-if="order_info.cleaning_status == 1" class="bottom_text">
					订单已入厂
				</view>
				<view v-if="order_info.cleaning_status == 2" class="bottom_text">
					订单清洗中
				</view>
				<view v-if="order_info.cleaning_status == 3" class="bottom_text">
					订单已出厂
				</view> -->
			</view>
			<view style="padding-left: 20rpx;">
				<trackNode :nowTime='nowTime' :colors="colors" :stepData="stepData"></trackNode>
			</view>

		</view>
	</view>
</template>

<script>
	import trackNode from '../../components/trackNode.vue'


	export default {
		components: {
			trackNode
		},
		data() {
			return {
				yifuDetail: {
					shui: '#180-812882-3',
					color: '黑色',
					time: '2023-09-20 11:07:22'
				},
				photoArr: ['https://pic.616pic.com/photoone/00/00/56/618ce8b3797b76152.jpg',
					'https://pic.616pic.com/photoone/00/00/56/618ce8b3797b76152.jpg',
					'https://pic.616pic.com/photoone/00/00/56/618ce8b3797b76152.jpg',
					'https://pic.616pic.com/photoone/00/00/56/618ce8b3797b76152.jpg',
					'https://pic.616pic.com/photoone/00/00/56/618ce8b3797b76152.jpg'
				],
				order_id: '',
				product_info: '',
				order_info: "",
				colors: "#2568BC",
				//模拟后台返回的数据
				stepData: [{
					operationRemark: '1234',
					operationTime: '123'
				}],
				nowTime: '',
				imgStatus: true
			};
		},
		methods: {
			getData() {
				let self = this;
				let order_id = self.order_id;
				let url = 'user.order/detail';
				self._get(url, {
						order_id: order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						console.log(res, 'res');
						self.product_info = res.data.order.product[0]
						self.order_info = res.data.order
						let aa = self.order_info.cleaning_img
						if (aa!=null && aa.indexOf(',') > -1) {
							console.log(' self.order_info.cleaning_imgq', self.order_info.cleaning_img);
							self.imgStatus = false
							self.order_info.cleaning_img = self.order_info.cleaning_img.split(",")
						} else {
							console.log(' self.order_info.cleaning_img2', self.order_info.cleaning_img);
							self.imgStatus = true
							self.order_info.cleaning_img = self.order_info.cleaning_img

						}
						self.stepData = res.data.order.process
						self.stepData.reverse()
						console.log('res', res);
					}
				);
			},
			getNowTime() {
				let date = new Date();
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				this.nowTime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		onLoad(options) {
			console.log(options, 'options');
			this.order_id = options.order_id
			this.getData()
			this.getNowTime()
		}
	}
</script>

<style lang="scss">
	.bottom_top {
		display: flex;
	}

	.zhaop {
		width: 120rpx;
		height: 119rpx;
	}

	.photo {
		width: 23%;
		height: 23%;
		margin-bottom: 30rpx;
	}

	.photo_class {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.top_class {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-bottom: 20rpx;
	}

	.all {
		background-color: #fff;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 4rpx;
	}

	.top {
		display: flex;
		padding: 32rpx 33rpx;
	}

	.top_left {
		width: 18%;
	}

	.top_right {
		flex: 1;
	}

	.yifu {
		height: 200rpx;
		width: 100rpx;
	}

	.yifu_class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #323232;
		padding-bottom: 25rpx;
	}

	.xian {
		height: 1rpx;
		background-color: #f6f6f6;
	}

	.cor {
		width: 34rpx;
		height: 34rpx;
	}

	.center {
		padding: 32rpx 33rpx;
	}

	.text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #323232;
		padding-left: 21rpx;
	}

	.center_top {
		display: flex;
		margin-bottom: 24rpx;
	}

	.bottom {
		padding: 32rpx 33rpx;
		display: flex;
		justify-content: space-between;
	}

	.bottom_text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EA743E;
	}
</style>